import { useEffect, useState } from "react";
import { Button, Space, Table } from "antd";
import _ from 'lodash';
import useMap from "../../../hooks/useMap";
import LittleTitle from "../../../../../../../common/LittleTitle";
import DetailList from "../../../common/JudgeAnalysis/DetailList";

export default function JznlfxResult(props) {
    const { result, onUpdateJz } = props;

    const map = useMap();

    return <div style={{
        padding: "0 12px"
    }}>
        <LittleTitle>分析概要</LittleTitle>
        <div style={{
            margin: "8px 0 16px 0"
        }}>
            <div>该区域共有减灾资源
                <span style={{
                    fontWeight: "bold",
                    color: '#f50',
                    padding: "0 3px"
                }}>{_.sumBy(result.data, 'count')}</span>处
            </div>
        </div>
        <LittleTitle>结果详情</LittleTitle>
        <Space direction="vertical" style={{
            marginTop: 8,
            width: '100%'
        }}>
            <Table bordered size="small" dataSource={result?.data} columns={[{
                dataIndex: 'jzzyxl',
                title: '类型'
            }, {
                title: '数量',
                dataIndex: 'count'
            }, {
                width: 80,
                align: "center",
                render: (a, record) => {
                    return <Button type="link" size="small"
                        onClick={() => {
                            map.dispatchEvent({
                                type: 'detail.show2',
                                title: record.jzzyxl,
                                component: <DetailList type="jzzy" jzzyxl={record.jzzyxl} wkt={result.wkt} />
                            })
                        }}
                    >详情</Button>
                }
            }]} pagination={{
                pageSize: 10
            }}

            />
        </Space>
    </div>
}